<template>
	<view class="container">
		<view class="mobile">
			<view class="title">輸入電話號碼</view>
			<input type="number" v-model="form.mobile" placeholder-style="color:#ccc;font-size:26rpx;"
				placeholder="請輸入電話號碼">
		</view>
		<view class="mobile">
			<view class="title">驗證碼</view>
			<input type="number" v-model="form.code" placeholder-style="color:#ccc;font-size:26rpx;"
				placeholder="請輸入驗證碼">
			<view class="get_code" @tap="getCodeFlag" v-if="!flag">獲取驗證碼</view>
			<view class="get_code" v-else>
				<u-count-down :time="60 * 1000" format="ss"></u-count-down>
			</view>
		</view>
		<view class="submit" :class="{active:form.code !== ''}" @tap="submit">提交</view>

	</view>
</template>

<script>
	import {
		getCode,
		checkCode
	} from '@/api/login_register.js'
	export default {
		data() {
			return {
				flag: false,
				form: {
					mobile: '',
					code: ''
				}
			};
		},
		methods: {
			getCodeFlag() {
				getCode({
					mobile: this.form.mobile,
					code_type: 'changpassword'
				}).then(res => {
					console.log(res)
					if (res.code === 1) {
						this.flag = true

						uni.showToast({
							title: res.msg,
						})

						setTimeout(() => {
							this.flag = false
						}, 60 * 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			submit() {
				if (this.form.code !== '') {
					// uni.navigateTo({
					// 	// url: `/pages/change_password/setNewPassword/setNewPassword?mobile=${btoa(JSON.stringify(this.form.mobile))}`
					// 	url: `/pages/change_password/setNewPassword/setNewPassword?mobile=${this.form.mobile}`
					// })
					checkCode({
						mobile: this.form.mobile,
						code: this.form.code
					}).then(res => {
						if (res.code === 1) {
							uni.showToast({
								title: res.msg,
								duration: 1000
							})
							setTimeout(() => {
								uni.navigateTo({
									url: `/pages/change_password/setNewPassword/setNewPassword?mobile=${this.form.mobile}`
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})

				} else {
					uni.showToast({
						title: '請輸入驗證碼',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		height: calc(100vh - 90rpx);
		background-color: #F3F5F9;
		// padding: 30rpx;
		box-sizing: border-box;

		.mobile {
			background-color: #fff;
			padding: 30rpx;
			display: flex;
			align-items: center;

			.title {
				margin-right: 20rpx;
				width: 180rpx;
			}

			input {
				padding: 10rpx;
			}

			.get_code {
				width: 180rpx;
				height: 50rpx;
				border: 1rpx solid #39B19D;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #39B19D;
				color: white;

				/deep/ .u-count-down__text {
					color: #fff !important;
				}
			}
		}

		.submit {
			height: 80rpx;
			margin: 30rpx;
			background: #39B19D;
			border-radius: 16rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0.4;
		}

		.active {
			opacity: 1;
		}
	}
</style>